<template>
	<div class="stars-wrap">
		<span v-for="(item,index) in this.starclass">
		    <span :class="item"></span>
		</span>
	</div>
</template>
<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        starclass: [],
        mark: 0
      };
    },
    created() {
  		this.mark = parseFloat(this.grade);
  		let star = parseInt(this.mark / 2);
  		let remainder = this.mark % 2;
  		if (remainder >= 1) {
  			star = star + 1;
  		}
  		for (let i = 0; i < 5; i++) {
  			if (i < star) {
  				this.starclass.push('star-icon');
  			} else {
  				this.starclass.push('star-grey');
  			}
  		}
    },
    methods: {
    },
    props: ['grade']
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/car.styl"
  /*主要文字 黑 main-fn
  次要文字 灰 se-fn
  预填文字 灰 pre-fn
  描边 灰 border 
  背景 灰 bg 
  主题 红 theme
  辅助 蓝 assist */
	.stars-wrap
		display inline-block
		.star-grey
          display inline-block
          rectangle-icon($bg-white,10px,10px)
          icon-image('star_grey')
          margin-left 3px
        .star-icon
          display inline-block
          rectangle-icon($bg-white,10px,10px)
          bg-image('star')
          margin-left 3px
</style>